<template>
	<view>
		<view class="background"></view>
		<view class="absolute">
			<view v-if="recordData.status === '0' || recordData.status === '1'" class="verifyCode">
				<view class="code">
					核销码：<text>{{ recordData.verificationCode }}</text>
				</view>
				<img class="qrCode" :src="recordData.verificationImg" alt="" />
			</view>
			<view class="maintenanceInfo">
				<view class="title">
					维修信息
				</view>
				<view class="body">
					<view>维修单号：<text>{{ recordData.id }}</text></view>
					<view>维修状态：
						<text v-if="recordData.status === '0'">已预约</text>
						<text v-else-if="recordData.status === '1'">进行中</text>
						<text v-else-if="recordData.status === '2'">已完成</text>
						<text v-else-if="recordData.status === '3'">已取消</text>
						<text v-else>未知状态</text>
					</view>
					<view>车主姓名：<text>{{ recordData.name }}</text></view>
					<view>联系方式：<text>{{ recordData.phone }}</text></view>
					<view>维修方式：<text>{{ recordData.type === '0' ? '到店维修' : '上门取车' }}</text></view>
					<view>取车位置：<text>{{ recordData.location || '无' }}</text></view>
					<view>预约日期：<text>{{ recordData.reservationTime }}</text></view>
					<view>提交日期：<text>{{ recordData.submitTime }}</text></view>
				</view>
			</view>
			<view class="carInfo">
				<view class="title">
					车辆信息
				</view>
				<view class="body">
					<view>车辆类型：<text>{{ getCarTypeName }}</text></view>
					<view>车牌号：<text>{{ recordData.carNum }}</text></view>
					<view>
						<view>
							整车照片：
							<view class="imgList">
								<view v-for="(item,index) in carImg" :key="index">
									<img class="img" :src="item" alt="" />
								</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 20rpx;margin-bottom: 30rpx;">
						<view>
							维修部位照片：
							<view class="imgList">
								<view v-for="(item,index) in maintenanceImg" :key="index">
									<img class="img" :src="item" alt="" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view v-if="recordData.status === '0'" class="bottom">
				<button @click="dialogToggle">取消订单</button>
			</view>
			<!-- 弹出框 -->
			<view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="取消预约" content="确认取消预约么？" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carImg: [],
				maintenanceImg: [],
				msgType: 'success',
				recordData: {
					id: '',
					verificationCode: '',
					verificationImg: '',
					mid: '',
					uid: '',
					type: '',
					name: '',
					phone: '',
					reservationTime: '',
					submitTime: '',
					location: '',
					carNum: '',
					vehiclePhotos: '',
					repairPhotos: '',
					status: '',
					del: '',
					user: {
						id: '',
						name: ''
					},
					shop: {
						id: '',
						name: ''
					},
					carType: {
						id: '',
						name: ''
					}
				}
			}
		},
		computed: {
			getCarTypeName() {
				return this.recordData.carType && this.recordData.carType.name ? this.recordData.carType.name : '未知'
			}
		},
		onLoad(options) {
			if (options.id) {
				this.loadMaintenanceRecord(options.id)
			}
		},
		methods: {
			// 加载维修记录数据
			async loadMaintenanceRecord(id) {
				try {
					this.$request({
						url: `shop/reservation/reservation/${id}`,
						method: 'GET',
						success: (res) => {
							if (res.data.code === 200) {
								// 更新页面数据
								this.recordData = res.data.data;
								
								// 更新图片数组 - 每个数组只存储一张图片
								this.carImg = this.recordData.vehiclePhotos ? [this.recordData.vehiclePhotos] : [];
								this.maintenanceImg = this.recordData.repairPhotos ? [this.recordData.repairPhotos] : [];
								
								console.log('维修记录数据:', this.recordData);
							} else {
								throw new Error(res.data.msg || '获取数据失败');
							}
						},
						fail: (err) => {
							console.error('加载维修记录失败:', err);
							uni.showToast({
								title: '加载数据失败',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('加载维修记录失败:', error);
					uni.showToast({
						title: error.message || '加载数据失败',
						icon: 'none'
					});
				}
			},

			// 修改取消预约方法
			async dialogConfirm() {
				try {
					this.$request({
						url: 'shop/reservation/reservation',
						method: 'PUT',
						data: {
							id: this.recordData.id,
							status: '3' // 3表示已取消
						},
						success: (res) => {
							if (res.data.code === 200) {
								this.recordData.status = '3'; // 更新本地状态
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								});
							} else {
								throw new Error(res.data.msg || '取消预约失败');
							}
						},
						fail: (err) => {
							console.error('取消预约失败:', err);
							uni.showToast({
								title: '取消预约失败',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('取消预约失败:', error);
					uni.showToast({
						title: error.message || '取消预约失败',
						icon: 'none'
					});
				}
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			// 取消取消预约
			dialogClose(){
				
			},
		}
	}
</script>

<style>
	page{
		padding: 0 20rpx;
		padding-bottom: 140rpx;
	}
	.background {
		width: 750rpx; 
		height: 280rpx;
		margin-left: -20rpx;
		background-color: #2979ff;
	}
	.absolute{
		position: absolute;
		top: 20rpx;
	}
// 核销码样式	
	.verifyCode{
		font-size: 34rpx;
		width: 710rpx;
		height: 270rpx;
		background-color: white;
		padding: 30rpx 0;
		text-align: center;
		border-radius: 20rpx;
	}
	.verifyCode > .code > text{
		font-size: 30rpx ;
	}
	.verifyCode > .qrCode {
		margin-top: 20rpx;
		width: 170rpx;
		height: 170rpx;
	}
// 维修信息样式	
	.maintenanceInfo{
		width: 670rpx;
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.maintenanceInfo > .title{
		font-size: 34rpx;
		border-bottom: 4rpx solid #f0f0f0;
		height: 60rpx;
		line-height: 60rpx;
	}
	.maintenanceInfo > .body > view {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.body > view > text{
		color: #6a6a6a;
	}
// 车辆信息样式
	.carInfo{
		top: 550rpx;
		width: 670rpx;
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 140rpx;
	}
	.carInfo > .title{
		font-size: 34rpx;
		border-bottom: 4rpx solid #f0f0f0;
		height: 60rpx;
		line-height: 60rpx;
	}
	.carInfo > .body > view {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	// 照片列表
	.imgList{
		display: flex;
		width: 710rpx;
		flex-wrap: wrap;
	}
	.imgList > view{
		margin-right: 30rpx;
		margin-top: 10rpx;
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
	}
	.imgList > view > .img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
// 底部样式
	.bottom{
		margin-top: 20rpx;
		width: 750rpx;
		height: 120rpx;
		margin-left: -20rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
	}
	.bottom > button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: white;
		/* background-image: linear-gradient(to right, #87cefa, #2979ff); */
		background-color: #2979ff;
	}
</style>
